<template>
<!-- <transition :name="transition"> -->
	<div class="page-wrapper">
		<div id="noti_header">
			<Switchtab :tabs="tabs" :initialtab="initialtab" @clicktab="clicktab"></Switchtab>
		</div>
		<transition :name="transition">
			<router-view></router-view>
		</transition>
	</div>
<!-- </transition> -->
</template>
<script>
	import Switchtab from '../Switchtab.vue'
	export default{
		name:'noticification',
		data(){
			return {
				tabs:[{
					content:'通知',
				},{
					content:'私信'
				}],
				tabShow:true,
				initialtab:0,
				transition:''
			}
		},
		mounted(){
			if(this.$route.path === '/notification/msg') this.initialtab = 1;
		},
		methods:{
			clicktab(i){
				if(i) {
			        this.$router.push('/notification/msg');
			        document.title = '私信';
			      }
			      else {
			        this.$router.push('/notification');
			        document.title = '通知';
			      }
			}
		},
		watch:{
		  	'$route'(to,from){
		    	this.transition = to.meta.tier > from.meta.tier? 'slideInRight' : 'slideInLeft';
		    	if(this.$route.path === '/notification/msg') this.initialtab = 1;
		    	else this.initialtab = 0;
		    }
		},
		components:{Switchtab}
	}
</script>
<style lang='less' scoped>
	#noti_header{
		text-align: center;
		padding:.27rem;
	}
</style>